<template>
  <button @click="modelShow = true">显示</button>
  <teleport to="body">
    <div class="model" v-if="modelShow">
      <button @click="modelShow = false">隐藏</button>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'ModelButton',
  setup() {
    const modelShow = ref(false)
    return { modelShow }
  }
})
</script>

<style scoped lang="scss">
.model {
  height: 300px;
  width: 300px;
  background: pink;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>